import './App.css';
// @ts-ignore
import { create } from './zustand';
// @ts-ignore
import immer from './zustand/middleware/immer';
// @ts-ignore

import logger from './zustand/middleware/logger';

const createState = (set: Function, get: Function, api: any) => {
  console.log('createState-set', set);
  console.log('createState-get', get);
  console.log('createState-api', api);
  return {
    number: 0,
    name: 'Number',
    add: () =>
      set((state: any) => {
        state.number = state.number;
      }),
    minus: () =>
      set((state: any) => {
        state.number--;
      }),
    asyncAdd: () => {
      setTimeout(() => {
        set((state: any) => ({ number: state.number + 1 }));
      }, 1000);
    },
  };
};
const useStore = create(immer(createState));

function App() {
  const { number, add } = useStore((state: any) => {
    console.log('useStore', state);
    return {
      number: state.number,
      add: state.add,
    };
  });
  return (
    <div className="app">
      <div className="card">
        <p>number: {number}</p>
        {/* <p>name: {name}</p> */}
        <button onClick={add}>add</button>
        {/* <button onClick={minus}>minus</button>
        <button onClick={asyncAdd}>async add</button> */}
      </div>
    </div>
  );
}

export default App;
